<template>
  <div class="user">
    <template>
      <el-table size="mini"
                :data="tableData"
                style="width: 100%;">
        <el-table-column
            label="订单号"
            prop="id"
            width="350">
        </el-table-column>
        <el-table-column label="用户id" prop="userId" width="100">
        </el-table-column>
        <el-table-column
            label="充值时间"
            prop="created"
            width="300">
        </el-table-column>
        <el-table-column
            label="充值金额"
            prop="balance">
        </el-table-column>

        <el-table-column
            align="right">
          <template slot="header" slot-scope="scope">
            <el-input
                v-model="search"
                size="mini"
                placeholder="根据用户id搜索"/>
          </template>
        </el-table-column>
      </el-table>
    </template>

    <div class="block">
      <el-pagination
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage1"
          :page-size="5"
          layout="total, prev, pager, next"
          :total="total">
      </el-pagination>
    </div>

  </div>
</template>

<script>
import {getallorders,ordersearch} from "../api";
import {mixin} from "../mixins";
export default {
  inject:["reload"],
  mixins: [mixin],
  name: "OrderMannage",
  data() {
    return {
      formLabelWidth: '120px',
      tableData: [],
      total: 0,
      search: '',
      currentPage1: 1,
      form:{
        id:'',
        userId: '',
        created: '',
        balance: '',
      },
    }
  },
  methods: {
    getsex(sex){
      if(sex===1){
        return '男';
      }else{
        return '女';
      }
    },
    //当前页
    handleCurrentChange(val) {
      this.tableData = [];
      getallorders(val).then((res)=>{
        this.tableData = res.data.records;
      })

    },

  },
  mounted() {
    getallorders(this.currentPage1).then((res)=>{
      this.tableData = res.data.records;
      this.total = res.data.total
    })
  },
  watch:{
    search : function (val){
      ordersearch(this.currentPage1,val).then((res)=>{
        this.tableData = [];
        this.tableData = res.data.records;
        this.total = res.data.total;
        console.log("========")
        console.log(this.tableData)
        console.log(this.total)
        console.log(this.tableData[0].userId)
      })
    }
  }
}
</script>

<style scoped>
.user{
  height: 300px;
}
.register{
  width: 200px;
  height: 200px;
}
>>>.el-dialog {
  width: 35%;
}
.block{
  padding: 20px 0;
}
h2{
  padding: 0;
  margin: 0;
}
.el-input{
  /*width: 30px;*/
}
</style>
